<template>
	<view class="my_page">

		<view class="head_body">
			<image src="/static/image/bg_logo.png" style="width: 100%;height: 100vh;position: absolute;top: 0upx;left: 0;" mode=""></image>
			<QSNavbar :navbarItems="navbarItems_1"></QSNavbar>

			<!-- <view class="status_bar" :style="{ height: heigthBar.statusBarHeight  + 'px' }"></view>
			
				<view class="header-center f-row-between f-row-Hcenter"  :style="{ height: headata.height * 2+  'rpx' }">
					<view :style="{ width: 15 + '%', paddingLeft: 30 + 'rpx' }"></view>
					<view class="textAlign-center f-row-Hcenter">
						<view class="logo">威店老板助手</view> 
					</view>
					<view :style="{ 
							color: '#FFF',
							width: 30 + '%',
							display: 'inlineFlex',
							justifyContent: 'right',
							paddingLeft: 55 + 'rpx',
							textAlign: 'right'
						}"></view>
				</view> -->

		</view> 
		<scroll-view :scroll-y="true" style="height: 100vh;" @scroll="scroll">
			<view class="head_banner">
				<view class="zhende">
					<image src="/static/image/bg_logo.png" style="width: 100%;height: 100vh;" mode=""></image>
					<view class="user-box f-row-Hcenter">
						<image :src="userInfo.wxUser.avatarUrl || 'https://i03piccdn.sogoucdn.com/49faba01b96c2227'" mode=""
						 @click="toSettings"></image>
						<view class="user">
							<view>{{ userInfo.branch_name }}</view>
							<view class="nickName" v-if="userInfo.wxUser.nickName">{{ userInfo.wxUser.nickName || '' }}</view>
						</view>
					</view>
				</view>

				<view class="chart-box f-column">
					<view class="sun-tietleBox">
						<sun-tietleBox :tietleData="'经营预览'">

							<view style="width: 100%;" class="dates f-row-between">
								<view class="date f-center" :style="{ margin: '10rpx', padding: '0 20rpx' ,height:'55rpx' }" :class="selected == 'd' ? 'selected' : ''"
								 @click="selected = 'd'">
									今日
								</view>
								<view class="date f-center" :style="{ margin: '10rpx' ,padding: '0 20rpx' ,height:'55rpx'}" :class="selected == 'zr' ? 'selected' : ''"
								 @click="selected = 'zr'">
									昨日
								</view>
								<view class="date f-center" :style="{ margin: '10rpx' ,padding: '0 20rpx' ,height:'55rpx'}" :class="selected == 'z' ? 'selected' : ''"
								 @click="selected = 'z'">
									本周
								</view>
								<view class="date f-center" :style="{ margin: '10rpx' ,padding: '0 20rpx' ,height:'55rpx'}" :class="selected == 'm' ? 'selected' : ''"
								 @click="selected = 'm'">
									本月
								</view>
							</view>

						</sun-tietleBox>
						<sun-Dates :selected="selected" @onSubmit="onSubmitDate"></sun-Dates>
					</view>

				</view>
				<view class="qiun-charts f-center" style="position: relative;">

					<canvas type="2d" canvas-id="cvsSell" id="cvsSell" class="charts" @touchstart="touchRing" :style="{position: 'absolute',zIndex: chartData.pay_amt.numder != 0 ? 20 :1}"></canvas>

					<view :style="{position: 'absolute',zIndex: chartData.pay_amt.numder == 0 ? 20 :1}" class="shopStop f-column-WHcenter">
						<img src="@/static/image/shopStop.png" alt="" style="width: 140upx;height: 170upx;background-color: #fff;" />
						<label  style="color: #CCCCCC;">{{ query.dateTypeName }}无营业</label>
					</view>
				</view>
				<view class="money-box f-row-Wcenter " style="width: 100%;">
					<view class="paddingtb20">
						<view class="itemMoney f-row-Hcenter">
							<span class=" iconMoney icons iconxiaoshoue"></span>
							<view class="titleMoney f-column-Hcenter">
								<span class="Money" v-if="resData.vip[0].sale_amt">
									<span class="textMoney">￥</span>
									{{ resData.vip[0].sale_amt.numder | toFIex }}{{ resData.vip[0].sale_amt.unit || '' }}
								</span>
								<span class="title">销售额（元）</span>
							</view>
						</view>
						<view class="itemMoney f-row-Hcenter">
							<span class="iconMoney icons icontuikuane"></span>
							<view class="titleMoney f-column-Hcenter">
								<span class="Money" v-if="chartData.total.ret_amt">
									<span class="textMoney">￥</span>
									{{ resData.vip[0].ret_amt.numder | toFIex }}{{ resData.vip[0].ret_amt.unit || '' }}
								</span>
								<span class="title">退款额（元）</span>
							</view>
						</view>
						<view class="itemMoney f-row-Hcenter">
							<span class="iconMoney icons iconkedanjia"></span>
							<view class="titleMoney f-column-Hcenter" v-if="chartData.total.cust_nums">
								<span class="Money">{{ resData.vip[0].cust_nums.numder | toFIex }}{{ resData.vip[0].cust_nums.unit || '' }}</span>
								<span class="title">客单数（笔）</span>
							</view>
						</view>
						<view class="itemMoney f-row-Hcenter">
							<span class="iconMoney icons iconkedanshu"></span>
							<view class="titleMoney f-column-Hcenter">
								<span class="Money" v-if="chartData.total.cust_prc">
									<span class="textMoney">￥</span>
									{{ resData.vip[0].cust_prc.numder | toFIex }}{{ resData.vip[0].cust_prc.unit || '' }}
								</span>
								<span class="title">客单价（元）</span>
							</view>
						</view>
					</view>
				</view>

				<view class="jingyin-box f-column">
					<view class="sun-tietleBox">
						<sun-tietleBox :tietleData="'经营分析'"></sun-tietleBox>
					</view>
					<view class="statistic-box">
						<view class="item-statistics f-column-WHcenter" @click="topage('/pages/statistics/analysis/analysis')">
							<label class="iconMoney icons iconjingyingfenxi1"></label>
							<label>经营分析</label>
							<label>营销大数据，深度挖掘</label>
						</view>
						<view class="item-statistics f-column-WHcenter" @click="topage('/pages/sell/sell')">
							<label class="iconMoney icons iconxiaoshoujiankong1"></label>
							<label>销售监控</label>
							<label>多维度统计，方便直观</label>
						</view>
						<view class="item-statistics f-column-WHcenter" @click="topage('/pages/collectMoney/collectMoney')">
							<label class="iconMoney icons iconshouyintongji1"></label>
							<label>收银统计</label>
							<label>收银支付，交班统计</label>
						</view>
						<view class="item-statistics f-column-WHcenter" @click="topage('/pages/collectFlow/collectFlow')">
							<label class="iconMoney icons iconshouyinliushui1"></label>
							<label>收银流水</label>
							<label>销售，退货单流水查询</label>
						</view>
						<view class="item-statistics f-column-WHcenter" @click="topage('/pages/store/store')">
							<label class="iconMoney icons iconkucuntongji1"></label>
							<label>库存统计</label>
							<label>多点库存，库存明细</label>
						</view>
						<view class="item-statistics f-column-WHcenter" @click="topage('/packageA/abnormal/abnormal')">
							<label class="iconMoney icons iconyichangjiankong1"></label>
							<label>异常监控</label>
							<label>收银支付，交班统计</label>
						</view>
						<view class="item-statistics f-column-WHcenter" @click="topage('/pages/store/stockWarning/stockWarning')">
							<label class="iconMoney icons iconkucunyujing1"></label>
							<label>库存预警</label>
							<label>积压不足，实时预警</label>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	var canvaRing = null;
	import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
	import api_server from '@/api/api_server.js';
	import uCharts from '@/components/u-charts/u-charts.js';
	import sunDate from '@/components/sun-Dates/sun-Dates.vue';
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	export default {
		components: {
			QSNavbar,
			sunTietleBox,
			sunDate
		},
		data() {
			return {
				selected: 'm',
				navbarItems_1: [{
					type: 'text',
					text: '威店老板助手',
					width: 70,
					iconColor: 'rgba(255,255,255)',
					color: 'rgba(255,255,255)',
					weight: 'bold'
				}],
				//刘海
				heigthBar: {
					statusBarHeight: 25
				},
				//各端高度数据
				headata: {
					bottom: 56,
					height: 26
				},
				headerHeigth: 110,

				cWidth: 750,
				cHeight: 450,
				pixelRatio: 2,
				scrollTop: 0,
				resData: {
					vip: [{
						sale_amt: {},
						ret_amt: {},
						cust_nums: {},
						cust_prc: {}
					}],
					shop: {},
					list: []
				},
				chartData: {
					show: true,
					total: {
						sale_amt: {
							numder: 0
						},
						ret_amt: {
							numder: 0
						},
						cust_nums: {
							numder: 0
						},
						cust_prc: {
							numder: 0
						}
					},
					pay_amt: {
						numder: 0
					},
					categories: [],
					series: [{
						name: '销售额',
						data: [],
						color: 'rgba(255, 85, 127, 1.0)'
					}]
				},
				//查询
				query: {
					branch_jg: '', //机构 支持%为全部机构
					start_date: 10000000,
					end_date: 10000000
				},
				token: '' //扫普通二维码的token，缓存后清除
			};

		},
		computed: {
			pay_amt_yn() {
				console.log('chartData.pay_amt.numder>>>>', chartData.pay_amt.numder)
				return chartData.pay_amt.numder;
			}
		},
		onLoad(option) {
			if (option.q) {
				let url = decodeURIComponent(option.q);
				let tokenArr = url.split('?token=');
				this.token = tokenArr[1];
			}
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(450);
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
			if(this.pixelRatio > 2){
				this.pixelRatio = 2;
			}

			// //headerHeigth高度适应
			// let heigth = 0;
			// uni.getSystemInfo({
			// 	success: res => {
			// 		this.heigthBar = res;
			// 		console.log('uni-heigthBar>>>', this.heigthBar, this.pixelRatio);
			// 	},
			// 	fail: error => {
			// 		console.log('error>>>', error);
			// 	}
			// });
			// // #ifdef MP-WEIXIN
			// //有返回布局信息
			// this.headata = wx.getMenuButtonBoundingClientRect();
			// // console.log('wx-headata>>>', this.headata);
			// //#endif
			// // #ifdef APP-PLUS
			// this.heigthBar = plus.navigator.hasNotchInScreen();
			// console.log('plus-heigthBar>>>', this.heigthBar);
			// if (this.heigthBar) {
			// 	this.headerHeigth = 100;
			// } else {
			// 	this.headerHeigth = 120;
			// }

			// //#endif

			// console.log('>>>', this.headata, this.heigthBar, this.headerHeigth);

		},
		onReady() {},
		onError(e, v, i) {
			console.log(e, v, i);
		},
		computed: {
			userInfo() {
				var userInfo = this.$store.getters.getUserInfo;
				userInfo.wxUser = userInfo.wxUser ? userInfo.wxUser : {};
				return userInfo;
			}
		},
		methods: {
			onSubmitDate(e) {
				this.query = { ...this.query,
					...e
				}
				this.getlogin();
			},
			getlogin() {
				if (this.token) {
					let Qtoken = this.token;
					let query = {
						"cmd": "AppQrLogin",
						"version": "1.0",
						"token": Qtoken,
						"pageNo": 0,
						"onePageNum": 10,
						"Params": {}
					}
					api_server.dwzy_AppQrLogin({
						data: query,
						success: res => {
							console.log('dwzy_AppLogin>>>>>', res.data)
							this.$store.commit('setUserInfo', res.data.data);
							this.getResData();
							this.token = '';
						}
					})

				} else {
					this.getResData();
				}

			},
			getResData() {
				if (this.query.branch_jg == '') {
					this.query.branch_name = this.userInfo.branch_name;
					this.query.branch_jg = this.userInfo.branch_default;
				}

				let query = this.query;
				// query.Params.end_date= 1609372800000;
				// query.Params.start_date= 1577808000000;
				let that = this;
				api_server.dwzy_GetAppSaleMonitorAnalysis({
					data: query,
					success: res => {
						console.log(5)
						if (res.data.data) {
							this.resData.list = res.data.data;
							let series = []
							this.resData.vip = [];
							this.resData.shop = [];
							this.chartData.pay_amt.numder = 0
							this.resData.list.forEach(item => {
								if (item.datatype == 1) {
									//支付分类数据
									let data = {
										name: item.data_title,
										data: item.pay_amt,
										legendShape: 'diamond'
										// color 
									}
									series.push(data);
									this.chartData.pay_amt.numder = this.$util.floatObj.add(this.chartData.pay_amt.numder, item.pay_amt);
								} else if (item.datatype == 2) {
									//门店收银 ml_amt/sale_amt
									this.resData.shop.push(item);

								} else if (item.datatype == 0) {
									//销售额，退款，单数，客单价
									//会员消费
									this.resData.vip.push(item);

									//算类别总数转换中文单位
									let item1 = this.$util.moneyUnit(this.resData.vip[0].sale_amt);
									this.resData.vip[0].sale_amt = { ...this.resData.vip[0].sale_amt,
										...item1
									};
									item1 = this.$util.moneyUnit(this.resData.vip[0].ret_amt);
									this.resData.vip[0].ret_amt = { ...this.resData.vip[0].ret_amt,
										...item1
									};
									item1 = this.$util.moneyUnit(this.resData.vip[0].cust_nums);
									this.resData.vip[0].cust_nums = { ...this.resData.vip[0].cust_nums,
										...item1
									};
									item1 = this.$util.moneyUnit(this.resData.vip[0].cust_prc);
									this.resData.vip[0].cust_prc = { ...this.resData.vip[0].cust_prc,
										...item1
									};
								}
							})
							//零售总额
							this.chartData.pay_amt = this.$util.moneyUnit(this.chartData.pay_amt.numder);
							//支付分类数据
							this.chartData.series = series;
							//console.log('chartData>>>>>>>',this.chartData);
							if (that.chartData.pay_amt.numder != 0) {
								that.chartData.show = true;

								that.showCanvas();
							} else {
								that.chartData.show = false;
							}

						}
					},
					fail(error) {
						console.log('error', error);
					}
				});
			},
			//为了遮住chart的滚动
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			onDate(type) {
				this.selected = type;
			},
			showCanvas() {
				let _self = this;
				let canvasId = 'cvsSell';
				let query = uni.createSelectorQuery();
				let data1 = {
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 12,
					dataLabel: false,
					legend: true,
					legend: {
						position: 'right',
						fontSize: 30,
						lineHeight: 22,
						padding: 22
					},
					title: {
						name: _self.chartData.pay_amt.numder + _self.chartData.pay_amt.unit,
						color: '#7cb5ec',
						fontSize: 25 * _self.pixelRatio,
						offsetY: -5 * _self.pixelRatio
					},
					subtitle: {
						name: '零售总额',
						color: '#666666',
						fontSize: 20 * _self.pixelRatio,
						offsetY: -8 * _self.pixelRatio
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 25 * _self.pixelRatio,
							labelWidth: 5
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: _self.chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// dataLabel: true,
				};
				//#ifdef MP


				query
					.select('#' + canvasId)
					.fields({
						node: true,
						size: true
					})
					.exec(res => {
						const canvas = res[0].node;
						const ctx = canvas.getContext('2d');
						canvas.width = res[0].width * _self.pixelRatio;
						canvas.height = res[0].height * _self.pixelRatio;
						// let data2 =JSON.stringify(data1);
						// let data3 = JSON.parse(data2);
						data1.canvas2d = true;
						data1.context = ctx;

						canvaRing = new uCharts(data1);
					});
				//#endif
				//#ifndef MP
				canvaRing = new uCharts(data1);
				//#endif

			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data;
					}
				});
			},
			topage(pages) {
				console.log(pages);
				if (pages) {
					this.$util.navigateTo({
						url: pages
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '敬请期待^_^'
					});
				}
			},
			toSettings() {
				this.$util.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.shopStop {
		background: #fff;
		width: 100%;
		height: 100%;
	}

	.head_body {
		position: fixed;
		width: 100%;
		left: 0;
		z-index: 99;
		top: 0;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		overflow: hidden;

		.status_bar {}


		.header-center {
			position: relative;
			width: 100%;
			display: inline-flex;

			box-sizing: border-box;

			.textAlign-center {
				border: 1px solid #09bb07;
				position: absolute;
				margin-left: 50%;
				// width: 5upx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.logo {
					transform: translateX(-50%);
					// width: 5upx;
					background-size: 160upx 60upx;

					font-size: 36upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ffffff;
				}
			}

			.textAlign-titleDetil {
				height: 42upx;
				font-size: 42upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 42upx;
			}
		}

	}

	.head_banner {
		position: relative;
		width: 100%;

		.zhende {
			position: relative;
			z-index: 3;
			width: 100%;
			height: 328upx;
			-webkit-overflow-scrolling: touch;
			overflow-scrolling: touch;
			overflow: hidden;

			.user-box {
				position: absolute;
				bottom: 38upx;
				left: 67upx;
				z-index: 19;

				image {
					width: 130upx;
					height: 128upx;
					border-radius: 300upx;
				}

				.user {
					margin-left: 22upx;
					font-size: 36ux;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3fb8b9;

					.nickName {
						display: inline-block;
						padding: 0 20upx;
						border-radius: 100upx;
						border: 1px solid rgba(74, 222, 222, 0.8);
						color: #3fb8b9;
					}
				}
			}
		}
	}

	.charts {
		
		// #ifdef MP
		width: 710upx; //小程序chart元素的宽度（同cWidth）（父级宽度减父级的padding宽度）
		// #endif
		// #ifndef MP
		width: 1400upx; //小程序chart元素的宽度（同cWidth）（父级宽度减父级的padding宽度）
		height: 900upx; //小程序chart元素的高度(.qiun-charts元素外层  统一)
		position: absolute;
		top: 0;
		left: 0;
		transform: scale(0.5) translate(-50%, -50%);
		// #endif
		background-color: rgba(255, 255, 255, 1);
	}

	.chart-box {  
		width: 100%;
		box-sizing: border-box;
		margin-top: 20upx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20upx 20upx 0 0;

		//控制组件的缩进（外边距）
		.sun-tietleBox {
			margin: 0 20upx;

			//slot style
			.datas {
				width: 500upx;
			}
		}

		.qiun-charts {
			margin: 20upx 20upx 0 20upx;
			padding: 20upx;
			box-sizing: border-box;
			background: rgba(255, 255, 255, 1);
			width: 710upx;
			height: 450upx; //小程序chart元素外层 (.charts 统一)
		}
	}

	.money-box {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 0 0 20upx 20upx;
		overflow: hidden;
		width: 100%;
		height: 100%;

		.paddingtb20 {
			border-top: 1upx rgba(212, 211, 211, 0.7) solid;
			width: 710upx;
			padding: 20upx 0;
		}

		.itemMoney {
			float: left;
			width: 50%;
			padding-left: 30upx;
			height: 130upx;
			border-left: 1px solid #e4ebec;
			border-bottom: 1px solid #e4ebec;

			.iconMoney {
				width: 70upx;
				height: 70upx;
				font-size: 70upx;
			}

			.titleMoney {
				margin-left: 20upx;

				.Money {
					.textMoney {
						font-size: 25upx;
					}

					font-size: 41upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #737574;
				}

				.title {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #929090;
				}
			}
		}

		.itemMoney:nth-of-type(1) {
			border-left: 0upx;

			.iconMoney {
				color: #975fe3;
				font-size: 65upx;

			}
		}

		.itemMoney:nth-of-type(2) {
			.iconMoney {
				color: #fa6e32;
			}
		}

		.itemMoney:nth-of-type(3) {
			border-left: 0upx;
			border-bottom: 0upx;

			.iconMoney {
				color: #00bb28;
			}
		}

		.itemMoney:nth-of-type(4) {
			border-bottom: 0upx;

			.iconMoney {
				color: #8b91f1;
				font-size: 63upx;
			}

			&::after {
				clear: both;
			}
		}

		&::after {
			clear: both;
		}
	}

	.jingyin-box {
		margin-top: 20upx;
		margin-bottom: 50upx;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 20upx;

		//控制组件的缩进（外边距）
		.sun-tietleBox {
			margin: 0 20upx;

			//slot style 当前页面的样式
			.datas {}
		}

		.statistic-box {
			overflow: hidden;
			height: 100%;
			padding-bottom: 20upx;
			margin-left: 15upx;
			margin-right: 8upx;
			margin-top: 10upx;
			width: 720upx;

			&::before {
				clear: both;
			}

			.item-statistics:nth-of-type(1) {
				margin-top: 18upx;
				color: #4cd964;
				width: 695upx;
			}

			.item-statistics:nth-of-type(2) {
				color: RGBA(245, 99, 100, 1);
			}

			.item-statistics:nth-of-type(3) {
				color: RGBA(255, 176, 60, 1);
			}

			.item-statistics:nth-of-type(4) {
				color: RGBA(12, 156, 254, 1);
			}

			.item-statistics:nth-of-type(5) {
				color: RGBA(245, 57, 143, 1);
			}

			.item-statistics:nth-of-type(6) {
				color: RGBA(255, 176, 60, 1);
			}

			.item-statistics:nth-of-type(7) {
				color: RGBA(50, 204, 131, 1);
			}

			.item-statistics {
				border-radius: 10upx;
				float: left;
				width: 47%;
				height: 207upx;
				margin: 10upx;
				box-shadow: 2rpx 2rpx 15rpx rgba(224, 139, 131, 0.3);

				label:nth-of-type(1) {
					width: 85upx;
					height: 85upx;
					font-size: 85upx;
				}

				label:nth-of-type(2) {
					font-size: 30upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #717171 !important;
					margin-top: 8upx;
				}

				label:nth-of-type(3) {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #b0afaf !important;
				}
			}
		}
	}
</style>
